<template>
  <div class="home">
    <div class="top"><div class="title">托管企业职工服务一件事</div></div>
    <div class="content">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="contetn-left">
            <ItemWrap :reverse="true" style="height: 900px" title="概况">
              <dv-border-box-2 :color="['#3e75b7', '#4e8cd6']" class="survey" v-for="item in list1" :key="item.text">
                <div class="nums">{{ item.nums }}</div>
                <div class="text">{{ item.text }}</div>
              </dv-border-box-2>
            </ItemWrap>
          </div>
        </el-col>
        <el-col :span="12">
          <el-col :span="12">
            <ItemWrap :reverse="true" style="height: 450px" title="职工服务">
              <div class="zgfw">
                <ul>
                  <li>
                    <img src="@/assets/image/sanjiao.png" width="26px" style="margin-right: 5px" />收录人事档案存放信息<span class="nums">{{
                      zgfw.countArchives
                    }}</span
                    >条
                  </li>
                  <li>
                    <img src="@/assets/image/sanjiao.png" width="26px" style="margin-right: 5px" />自管公有住房
                    <span class="nums">{{ zgfw.countZgf }}</span
                    >处
                  </li>
                  <li>
                    <img src="@/assets/image/sanjiao.png" width="26px" style="margin-right: 5px" />生存认证<span class="nums">{{
                      zgfw.countExistence
                    }}</span
                    >次
                  </li>
                  <li>
                    <img src="@/assets/image/sanjiao.png" width="26px" style="margin-right: 5px" />办理职工服务事项<span class="nums">{{
                      zgfw.countStaffWork
                    }}</span
                    >笔
                  </li>
                  <li>
                    <img src="@/assets/image/sanjiao.png" width="26px" style="margin-right: 5px" />服务费用审批<span class="nums">{{
                      zgfw.countFee.countSum
                    }}</span
                    >笔 <span class="nums">{{ zgfw.countFee.feeCount }}</span
                    >元
                  </li>
                  <li>
                    <img src="@/assets/image/sanjiao.png" width="26px" style="margin-right: 5px" />核实职工待遇信息<span class="nums">230</span>笔
                  </li>
                </ul>
              </div>
            </ItemWrap>
          </el-col>
          <el-col :span="12">
            <ItemWrap :reverse="true" style="height: 450px" title="资产监管">
              <div class="zgfw">
                <ul>
                  <li>
                    <img src="@/assets/image/sanjiao.png" width="26px" style="margin-right: 5px" />经营性网点<span class="nums">108</span>处<span
                      class="nums"
                      >9.4万</span
                    >平方米
                  </li>
                  <li>
                    <img src="@/assets/image/sanjiao.png" width="26px" style="margin-right: 5px" />组织安全生产检查<span class="nums">{{
                      zc.countInspect
                    }}</span
                    >次
                  </li>
                  <li>
                    <img src="@/assets/image/sanjiao.png" width="26px" style="margin-right: 5px" />检查网点<span class="nums">{{
                      zc.countInspectInfo.network
                    }}</span
                    >处
                  </li>
                  <li>
                    <img src="@/assets/image/sanjiao.png" width="26px" style="margin-right: 5px" />发现安全隐患<span class="nums">{{
                      zc.countInspectInfo.hidden
                    }}</span
                    >个
                  </li>
                  <li>
                    <img src="@/assets/image/sanjiao.png" width="26px" style="margin-right: 5px" />已整改<span class="nums">{{
                      zc.countRectification.count
                    }}</span
                    >个
                  </li>
                  <li>
                    <img src="@/assets/image/sanjiao.png" width="26px" style="margin-right: 5px" />平均整改用时<span class="nums">{{
                      zc.countRectification.time
                    }}</span
                    >天
                  </li>
                </ul>
              </div>
            </ItemWrap>
          </el-col>
          <el-col :span="24">
            <ItemWrap :reverse="true" style="height: 420px; margin-top: 30px" title="政务服务">
              <div class="zwfw">
                <ul>
                  <li>
                    <p>管理企业档案<span class="nums"> 23.5</span>万卷</p>
                    <p>完成信息化 <span class="nums">13.3</span>万卷</p>
                  </li>
                  <li>
                    <p>
                      管理印章<span class="nums">{{ zwfw.countSeal }}</span
                      >个
                    </p>
                    <p>
                      用印 <span class="nums">{{ zwfw.countSealTime.count }}</span
                      >个
                    </p>
                    <p>
                      平均用时 <span class="nums">{{ zwfw.countSealTime.time }}</span
                      >天
                    </p>
                  </li>
                  <li>
                    <p>
                      审核信息<span class="nums">{{ zwfw.countGovernmentInfo }}</span
                      >篇
                    </p>
                  </li>
                  <li>
                    <p>
                      收录资料库信息<span class="nums">{{ zwfw.countDatabase }}</span
                      >条
                    </p>
                  </li>
                  <li>
                    <p>
                      管理议题<span class="nums">{{ zwfw.countTopic }}</span
                      >个
                    </p>
                    <p>
                      督办重点事项 <span class="nums">{{ zwfw.countItem }}</span
                      >个
                    </p>
                  </li>
                </ul>
              </div>
            </ItemWrap>
          </el-col>
        </el-col>
        <el-col :span="6">
          <ItemWrap :reverse="true" style="height: 240px" title="企业信息">
            <div class="qyxx">
              <div class="qyxx-box">
                <p class="title">收录企业</p>
                <p style="padding-top: 15px">
                  <span class="nums">{{ countEnterprise }}</span
                  >户
                </p>
              </div>
              <div class="line-box"></div>
              <div class="qyxx-box">
                <p class="title">提供查询服务</p>
                <p style="padding-top: 15px"><span class="nums">75</span>次</p>
              </div>
            </div>
          </ItemWrap>
          <ItemWrap :reverse="true" style="height: 630px; margin-top: 30px" title="职工信息">
            <echarts1 style="height: 300px" v-if="dataList1.length > 0" :data="dataList1"></echarts1>
            <div class="echarts-title">
              <ul>
                <li>
                  <span class="bg-color"></span>精简供养家属工<span class="nums">{{ zgxx.jingjian }}</span
                  >名
                </li>
                <li>
                  <span class="bg-color"></span>军转干部<span class="nums">{{ zgxx.junzhuan }}</span
                  >名
                </li>
                <li>
                  <span class="bg-color"></span>劳模<span class="nums">{{ zgxx.laomo }}</span
                  >名
                </li>
                <li>
                  <span class="bg-color"></span>离退休老干部<span class="nums">{{ zgxx.tuixiu }}</span
                  >名
                </li>
                <li>
                  <span class="bg-color"></span>会议纪要人员<span class="nums">{{ zgxx.huiyi }}</span
                  >名
                </li>
              </ul>
            </div>
          </ItemWrap>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import ItemWrap from '@/components/item-wrap/item-wrap.vue'
import echarts1 from './echarts/echarts1.vue'

export default {
  name: 'HomeView',
  components: {
    ItemWrap,
    echarts1,
  },
  data() {
    return {
      list1: [
        { nums: 9, text: '“爱山东”APP接入业务数量' },
        { nums: 9, text: '“青e办”APP接入业务数量' },
        { nums: 6, text: '山东政务服务网接入业务数量' },
        { nums: 8, text: '业务模块' },
        { nums: 40, text: '业务项数' },
        { nums: 23, text: '共享市人社局、医保局等5部门数据接口及数据资源数量' },
      ],
      dataList1: [],
      zgfw: {
        countArchives: 0, // 人事档案数量
        countZgf: 0, // 自管公有住房数量
        countExistence: 0, // 生存认证次数
        countStaffWork: 0, // 办理职工服务事项次数
        countFee: {
          feeCount: 0,
          countSum: 0, // 服务费用审批
        },
      },
      zwfw: {
        countSeal: 0, // 管理印章个数
        countSealTime: {
          count: 0,
          time: 0,
        }, // 用印个数及时间
        countGovernmentInfo: 0, // 审核信息篇数
        countDatabase: 0, // 收录资料库信息数
        countTopic: 0, // 管理议题
        countItem: 0, // 督办重点事项
      },
      zc: {
        countInspect: 0, // 安全生产检查次数
        countInspectInfo: {
          hidden: 0,
          network: 0,
        },
        countRectification: {
          count: 0,
          time: 0,
        },
      },
      countEnterprise: 0, // 收录企业数量
      zgxx: {
        jingjian: 0,
        junzhuan: 0,
        laomo: 0,
        tuixiu: 0,
      },
    }
  },
  mounted() {
    // 职工服务
    this.getzgfwNums('countArchives')
    this.getzgfwNums('countZgf')
    this.getzgfwNums('countExistence')
    this.getzgfwNums('countStaffWork')
    this.getzgfwNums('countFee')
    // 政务服务 数据
    this.getzwfwNums('countSeal')
    this.getzwfwNums('countSealTime')
    this.getzwfwNums('countGovernmentInfo')
    this.getzwfwNums('countDatabase')
    this.getzwfwNums('countTopic')
    this.getzwfwNums('countItem')
    // 资产 数据
    this.getZcNums('countInspect')
    this.getZcNums('countInspectInfo')
    this.getZcNums('countRectification')
    // 企业
    this.getcountEnterprise()
    // 职工信息
    this.getzgxxInfo()
  },
  methods: {
    // 职工服务的数量
    getzgfwNums(param) {
      this.$post(`/city/data/${param}`).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let data = res.data
        if (param === 'countFee') {
          this.zgfw.countFee.countSum = data.countSum
          this.zgfw.countFee.feeCount = data.feeCount
        } else {
          this.zgfw[param] = data
        }
      })
    },
    /**
     * 政务服务
     * countDatabase 收录资料库信息数  第四行
     * countGovernmentInfo  审核信息篇数 第三行
     * countItem  督办重点事项      第五航
     * countTopic   管理议题         第五航
     * countSeal  管理印章个数      第二行
     * countSealTime  用印个数及时间   第二行
     */
    getzwfwNums(param) {
      this.$post(`/city/data/${param}`).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let data = res.data
        if (param === 'countSealTime') {
          this.zwfw[param].count = data.count
          this.zwfw[param].time = data.time
        } else {
          this.zwfw[param] = data
        }
      })
    },
    /**
     * 资产
     * countInspectInfo 检查网点个数，安全隐患个数  第三四行
     * countInspect  安全生产检查次数  第二行
     * countRectification 整改个数及时间 第五六行
     */
    getZcNums(param) {
      this.$post(`/city/data/${param}`).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let data = res.data
        if (param === 'countInspectInfo') {
          this.zc[param].hidden = data.hidden
          this.zc[param].network = data.network
        } else if (param === 'countRectification') {
          this.zc[param].count = data.count
          this.zc[param].time = data.time
        } else {
          this.zc[param] = data
        }
      })
    },
    // 企业数据
    getcountEnterprise() {
      this.$post(`/city/data/countEnterprise`).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let data = res.data
        this.countEnterprise = data
      })
    },
    // 职工信息
    getzgxxInfo() {
      this.$post('/city/data/countWorker').then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let data = res.data
        this.zgxx = data
        this.dataList1 = [
          {
            name: '精简供养家属工',
            value: data.jingjian,
          },
          {
            name: '军转干部',
            value: data.junzhuan,
          },
          {
            name: '劳模',
            value: data.laomo,
          },
          {
            name: '离退休老干部',
            value: data.tuixiu,
          },
          {
            name: '会议纪要人员',
            value: '400',
          },
        ]
        this.zgxx.huiyi = '400'
        console.log('aaaaa', this.dataList1, this.zgxx)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.home {
  // width: 100vw;
  width: 1920px;
  height: 1080px;
  padding: 0;
  margin: 0;
  background-color: #0c1930;
  box-sizing: border-box;

  .top {
    width: 100%;
    height: 116px;
    background: url('../assets/image/headers/top.png') no-repeat;
    background-size: 100%;
    .title {
      font-size: 46px;
      font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;
      font-weight: 600;
      letter-spacing: 3px;
      color: #22deee;
      text-shadow: 0px 2px 16px #112b57;
      line-height: 116px;
    }
  }
  .content {
    padding: 15px;
    // margin-top: 30px;
    height: 950px;
    box-sizing: border-box;
  }
  .survey:last-child{
    height: 135px;
  }
  .survey {
    height: 110px;
    width: 94%;
    margin-left: 3%;
    // height: auto;
    margin-top: 20px;
    .nums {
      font-size: 28px;
      font-family: Oswald-Regular, Oswald;
      font-weight: 400;
      color: #22deee;
      padding: 10px 0 5px 0;
    }
    .text {
      font-size: 20px;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      color: #ffffff;
      // padding: 10px 20px 25px 20px;
      padding: 10px 20px 10px 20px;
    }
  }
  .zgfw {
    ul li {
      border-bottom: 2px dashed #3265a2;
      padding: 16px 5px 16px 10px;
      font-size: 16px;
      color: #22deee;
      display: flex;
      align-items: center;
      letter-spacing: 2px;
      .nums {
        display: inline-block;
        padding: 0 5px;
        color: #ffffff;
        font-size: 22px;
      }
    }
    li:last-child {
      border-bottom: none;
    }
  }
  .qyxx {
    display: flex;
    padding-bottom: 10px;
    .line-box {
      width: 8px;
      height: 136px;
      background: linear-gradient(180deg, rgba(47, 129, 222, 0) 0%, #3982d9 50%, rgba(46, 128, 222, 0) 100%);
    }
    .qyxx-box {
      width: 49%;
      p.title {
        padding: 0 8px;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: 2px;
        background: linear-gradient(92deg, #0072ff, #00eaff 48.85253906%, #01aaff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-top: 30px;
      }
      p {
        font-size: 24px;
        font-weight: 400;
        color: #ffffff;
      }
      .nums {
        font-size: 36px;
        font-weight: 400;
        color: #fec14d;
      }
    }
  }
  .echarts-title {
    padding: 0 16px 0 50px;
    ul li {
      text-align: left;
      font-size: 20px;
      line-height: 45px;
      letter-spacing: 3px;
      color: #ffffff;
      display: flex;
      align-items: center;
      .bg-color {
        width: 20px;
        height: 20px;
        background: #27d099;
        display: inline-block;
        margin-right: 10px;
      }
      .nums {
        font-size: 30px;
        // font-family: Oswald-Regular, Oswald;
        font-weight: 400;
        color: #ffffff;
        display: inline-block;
        padding: 0 10px;
      }
    }
    ul li:nth-child(2) {
      .bg-color {
        background: #b458f5;
      }
    }
    ul li:nth-child(3) {
      .bg-color {
        background: #5684f4;
      }
    }
    ul li:nth-child(4) {
      .bg-color {
        background: #f36868;
      }
    }
    ul li:nth-child(5) {
      .bg-color {
        background: #fcd54b;
      }
    }
  }
  /**政务服务 */
  .zwfw {
    ul li:nth-child(even) {
      background-color: rgba(255, 255, 255, 0.06);
    }
    ul li {
      line-height: 65px;
      display: flex;
      padding: 0 16px;
      font-size: 22px;
      font-weight: 400;
      color: #ffffff;
      letter-spacing: 2px;
      align-items: center;
      p {
        margin-left: 20px;
        display: flex;
        .nums {
          font-size: 28px;
          font-weight: 400;
          color: #fec14d;
          padding: 0 10px;
        }
      }
    }
  }

  .text-box {
    height: 960px;
    background: yellow;
  }
}
</style>
